/**
 * @author zhangqiang
 * @date   17/7/20
 */
import React, {Component} from 'react'
import {connect} from 'react-redux'
import {Toast} from 'antd-mobile'
import {bindActionCreators } from 'redux'
import {getOrderList} from '../../actions/twPaySuccessActions'
import '../../../styles/familyNameList.scss';
import BackMeanSure from '../../utils/backMeanSure';
import common from '../../utils/common'
import UrlOperation from '../../utils/urlOperation'
import style from './index.scss'

class Paysuccess extends Component {
	constructor(props) {
		super(props);
		this.state = {}
		this.chargeOrderId = UrlOperation.getUrlParam('chargeOrderId')
		this.payType = UrlOperation.getUrlParam('payType')
		this.advertUrl = this.advertUrl.bind(this)
		this.backMeanSureInstance = new BackMeanSure(this.goHome.bind(this), 'twPaysuccess');		
	}

	//返回首页
	goHome() {
        history.pushState({}, '', '');
        let backNumber = -1 * history.length + 1;
        history.go(backNumber);
	}

	toUrl(url) {
		this.context.router.push(url);
	}

	componentWillMount(){
		if(sessionStorage.getItem('payType')){
			sessionStorage.removeItem('payType')  //支付成功删除选择支付类型
		}
	}

	componentDidMount() {
		common.setViewTitle('支付成功');
		this.backMeanSureInstance.bindBackMeansure();				
		let getData={
			chargeOrderId: this.chargeOrderId,
			payType: this.payType
		};
		this.props.dispatch(getOrderList(getData))
	}

	componentWillUnmount() {
		//支付成功页 回复默认状态
		sessionStorage.removeItem('twCacheAllState')
	}

	advertUrl(url){
		window.location.href=url;
	}

	render() {
		let advert = this.props.passOrderList.uiConfig;
		return (
			<div className={style.paysuccess}>
				<div className={style.explain}>
					<div className={style.successImg}>
						<img src="./images/success.png" alt=""/>
						<div>支付成功</div>
					</div>
					<div className={style.caption}>
						已支付成功，正在处理，请耐心等待
					</div>
				</div>
				<div style={{height: '.24rem',background: '#f2f2f2'}}></div>
				<div className={style.orderList}>
					{
						this.props.passOrderList.orderList.map((e,i)=>{
							return <div className={style.list} key={i} onClick={()=>{this.toUrl(`twOrderDetails/${e.orderId}/${this.chargeOrderId}`)}}>
								<div className={style.visaType}>
									<span className={`${style.orderTitle} text-overflow-1`}>{e.orderTitle }</span>
									<div className={style.toDetails}>
										<span>查看订单详情</span>
										<img src="./images/green_r.png" alt=""/>
									</div>
									<div className={style.orderNum}>订单号：<span>{e.orderId}</span></div>
								</div>
							</div>
						})
					}
				</div>
				<div style={{height: '.46rem'}}></div>
				{
					advert?
						<div className={style.banner}>
							<img src={advert.icon} onClick={()=>{this.advertUrl(advert.url)}} alt=""/>
						</div>:''
				}

				<div style={{height: '1.54rem'}}></div>
				{/*<div className={style.provider}>本服务由中国邮政速递物流提供</div>*/}
				{/*<div className={style.tel}>EMS客服热线：020-11183</div>*/}

			</div>
		)
    }
}

//使用context
Paysuccess.contextTypes = {
    router: React.PropTypes.object.isRequired
};

Paysuccess.defaultProps = {
	passOrderList:{
		orderList:[],
		uiConfig:{}
	},
	list:[]
};

function mapStateToProps(state) {
	return Object.assign({}, state.paySuccessReducer);
}

export default connect(mapStateToProps)(Paysuccess);
